<template>
  <div>
  
  <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">
          
          <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
    <el-radio-button :value="false">expand</el-radio-button>
    <el-radio-button :value="true">collapse</el-radio-button>
  </el-radio-group>
  <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
    :router="true"
  >
    <el-sub-menu :index="item.id+''" v-for="(item,index) in left" :key="index">
      <template #title>
        <el-icon><location /></el-icon>
        <span>{{item.name}}</span>
      </template>
      <el-menu-item-group>
      
        <el-menu-item :index="val.id+''" v-for="(val,index) in item.children" :key="index" :route="{path:val.path}">{{ val.name }}</el-menu-item>
       
      </el-menu-item-group>
     
    </el-sub-menu>
   
  </el-menu>

        </el-aside>
        <el-main>
           <RouterView />
        </el-main>
      </el-container>
    </el-container>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'




const isCollapse = ref(true)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

let left=localStorage.getItem('tree')?JSON.parse(localStorage.getItem('tree')):[]
console.log(left);

</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>